<template>
	<el-container>
		

		<el-main>
			<!-- 搜索表单 -->
			<div style="padding: 2%;">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="文章标题">
                        <el-input placeholder="请输入文章标题" v-model="article.title"></el-input>
                    </el-form-item>
                    <el-form-item label="作者">
                        <el-select v-model="article.userId" placeholder="请选择">
                            <el-option v-for="item in usersList" :key="item.id" :label="item.nickname" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="分类">
                        <el-select v-model="article.categoryId" placeholder="请选择">
                            <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 查询按钮 -->
                    <el-form-item>
                        <el-button type="primary" @click="getData(currentPage,pageSize)">查询</el-button>
                    </el-form-item>
                  
                    
                </el-form>
            </div>
			<!-- 数据表格 -->
			<el-table border stripe :data="tableData" style="width: 100%">
				<!-- ID -->
				<el-table-column prop="id" align="center" label="ID">
				</el-table-column>

				<!-- 标题 -->
				<el-table-column prop="title" label="标题" align="center">
					<template slot-scope="scope">
						<router-link :to="{path:'/editArticle/index',query:{id:scope.row.id}}">{{ scope.row.title }}</router-link>
					</template>
				</el-table-column>
				<!-- 浏览量 -->
				<el-table-column prop="hits" align="center" label="浏览量">
				</el-table-column>

				<!-- 作者 -->
				<el-table-column prop="author" align="center" label="作者">
				</el-table-column>
				<!-- 状态 -->
				<el-table-column prop="status" align="center" label="状态">
					<template slot-scope="scope">
						<el-tag type="success" v-if="scope.row.status == 'publish'">已发布</el-tag>
						<el-tag type="warning" v-if="scope.row.status == 'draft'">未发布</el-tag>
					</template>
				</el-table-column>
				<!-- 分类 -->
				<el-table-column prop="categoryName" align="center" label="所属分类">
					<template slot-scope="scope">
						<el-tag type="primary" >{{ scope.row.categoryName }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column align="center" width="250px" label="操作">
					<template slot-scope="scope">
						<el-button size="small" type="danger" @click="del(scope.row.id)">删除</el-button>
						<el-button size="small" type="warning" @click="toLink(scope.row.id)">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 分页 -->
			<el-pagination 
				background 
				style="margin-top: 10px" 
				align="right" 
				layout="prev, pager, next" 
				:current-page.sync="currentPage"
				:page-size="pageSize"
				@current-change="getAllArticle"
				:total="total">
			</el-pagination>
			<!-- 模态框 -->
			<div class="dct_camera">
				<el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
					<span>确定要删除吗？</span>
					<span slot="footer" class="dialog-footer">
						<el-button @click="dialogVisible = false">取 消</el-button>
						<el-button @click="delArticleById()" type="primary">确 定</el-button>
					</span>
				</el-dialog>
			</div>
		</el-main>
	</el-container>
</template>

<script>
	import ArticleApi from '@/api/article'
	import {getAllUsers} from '@/api/user'
import category from '@/api/category';
	export default {
		name: 'index',
		inject: ['reload'],
		data() {
			return {
				currentPage:1,
				pageSize:5,
				total:0,
				article:{
					title:'',
					userId:null,
					categoryId:null,
				},
				usersList:[],
				categoryList:[],
				articleId: 0,
				dialogVisible: false,
				tableData: [{
						id: '1',
						title: '第一篇文章',
						createTime: new Date().toLocaleString,
						see: 100,
						categories: [],
						state: 'publish'
					},
					{
						id: '2',
						title: '第一篇文章',
						createTime: new Date().toLocaleString,
						see: 100,
						categories: [],
						state: 'publish'
					},
					{
						id: '3',
						title: '第一篇文章',
						createTime: new Date().toLocaleString,
						see: 100,
						categories: [],
						state: 'publish'
					}
				]
			}
		},
		created() {
			this.getAllArticle()
			this.getUsers()
			this.getCategoy()
		},
		methods: {
			// 获取所有文章
			getAllArticle() {
				ArticleApi.getAllArticles(this.currentPage,this.pageSize).then(resp => {
					this.tableData = resp.data.list
					this.total=resp.data.total
				})
			},
			// 获取分页数据
			getData(currentPage,pageSize){
				ArticleApi.getPageData(this.article,currentPage,pageSize).then(resp=>{
					this.tableData = resp.data.list
					this.total=resp.data.total
				})
			},
			// 获取所有用户
			getUsers(){
				getAllUsers().then(resp=>{
					this.usersList=resp.data
					
				})
			},
			// 获取所有分类
			getCategoy(){
				category.getAllCategory().then(resp=>{
					this.categoryList =resp.data
					
				})
			},
			
			del(id) {
				this.articleId = id,
				this.dialogVisible = true
			},
			delArticleById() {
				console.log(this.articleId)
				ArticleApi.delArticleById(this.articleId).then(resp => {
					//提示信息
					this.$message({
						message: "删除成功",
						type: "success"
					})
					//关闭模态框
					this.dialogVisible = false
					//页面刷新
					this.reload()
				})
			},
			toLink(id) {
				this.$router.push({
					path: '/editArticle/index',
					query: {
						id: id
					}
				})
			}
		}
	}
</script>

<style scoped>

</style>
